<template>
  <div style="height: 100%;background-color: #01001C;">
    <div class="conten">
      <el-row>
        <el-col :span="24"><img class="video" src="../../assets/imgs/audio.png"><p style="color:#FFFFFF;font-size:5px;float: left;margin: 13px 43px;">音频监测</p><p v-if="monitorList.length>0" style="color: #1CF711;font-size: 12px;right: 36px;margin: 13px 0;position: absolute;">智能语音设备正常</p></el-col>
        <div style="height: 1px;margin-top: 30px;width: 90%;background-image: linear-gradient(90deg, #1D3CA0, #020B1F);" />
      </el-row>
      <el-row v-if="monitorList.length > 0">
        <div v-for="(item,index) in audioChannelList" :key="index+'audioChannelList'" :class="[item.cStatus ===1 ? 'cameras':'cameras']">
          <div v-if="item.detection == 'OUT'"><p style="color:#FFFFFF;margin: 10px 13px;line-height: 8px;font-size: 12px;"> 话筒拔出</p></div>
          <div v-if="item.detection == 'IN'">
            <span v-if="item.mute === 0"><p style="margin: 10px 13px;line-height: 8px;font-size: 12px;"> {{ item.channelName }} </p></span>
            <span v-if="item.mute === 1"><p style="margin: 10px 13px;line-height: 8px;font-size: 12px;"> 已禁用 </p></span>
          </div>
          <div style="margin: -9px 7px;float: right;">
            <div :class="[item.level <= 7 ? 'voiceStyle' : 'highVoice']">0</div>
            <div :class="[item.level <= 6 ? 'voiceStyle' : 'highVoice']">-6</div>
            <div :class="[item.level <= 5 ? 'voiceStyle' : 'inSound']">-12</div>
            <div :class="[item.level <= 4 ? 'voiceStyle' : 'inSound']">-18</div>
            <div :class="[item.level <= 3 ? 'voiceStyle' : 'lowVoice']">-24</div>
            <div :class="[item.level <= 2 ? 'voiceStyle' : 'lowVoice']">-30</div>
            <div :class="[item.level <= 1 ? 'voiceStyle' : 'lowVoice']">-35</div>
            <div :class="[item.level <= 0 ? 'voiceStyle' : 'lowVoice']">-42</div>
            <div class="voiceName">
              <span>{{ item.volume }}</span>
            </div>
          </div>
          <p v-if="item.detection == 'IN'" style="color:#18E115;margin-left: 13px;margin-top: 80px;">在线</p>
          <p v-if="item.detection == 'OUT'" style="color:#F10808;margin-left: 13px;margin-top: 80px;">离线</p>
        </div>
      </el-row>
      <el-row v-if="monitorList.length===0">
        <p style="color: #999999;text-align: center;font-size: 12px;margin-top: 16%;">暂未配置智能语音设备</p>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getAllTribunalEquipmentListByType, sendEquipmentCommand } from '@/api/tribunalEquipment'
import { findAllPowerConfig } from '@/api/powerConfig'
// 在main.js或需要使用的地方引入并建立连接
import { createSocket, closeSocket } from '@sven0706/websocket'

export default {
  name: '',
  props: {
    tribunal4: {
      type: Number, // 类型
      default: () => {
      } // 默认值
    }
  },
  data() {
    return {
      mute1: 0, // 禁音状态 0静音 1启用
      mute2: 0, // 禁音状态 0静音 1启用
      mute3: 0, // 禁音状态 0静音 1启用
      mute4: 0, // 禁音状态 0静音 1启用
      mute5: 0, // 禁音状态 0静音 1启用
      mute6: 0, // 禁音状态 0静音 1启用
      mute7: 0, // 禁音状态 0静音 1启用
      mute8: 0, // 禁音状态 0静音 1启用
      mute9: 0, // 禁音状态 0静音 1启用
      mute10: 0, // 禁音状态 0静音 1启用
      audioChannelList: [
        // 音量大小
        {
          level: 0,
          volume: 0,
          mute: 0,
          channelName: '通道一',
          detection: 'OUT',
          channelId: '01'
        },
        {
          level: 0,
          volume: 0,
          mute: 0,
          channelName: '通道二',
          detection: 'OUT',
          channelId: '02'
        },
        {
          level: 0,
          volume: 0,
          mute: 0,
          channelName: '通道三',
          detection: 'OUT',
          channelId: '03'
        },
        {
          level: 0,
          volume: 0,
          mute: 0,
          channelName: '通道四',
          detection: 'OUT',
          channelId: '04'
        },
        {
          level: 0,
          mute: 0,
          channelName: '通道五',
          detection: 'OUT',
          channelId: '05'
        },
        {
          level: 0,
          volume: 0,
          mute: 0,
          channelName: '通道六',
          detection: 'OUT',
          channelId: '06'
        },
        {
          level: 0,
          volume: 0,
          mute: 0,
          channelName: '通道七',
          detection: 'OUT',
          channelId: '07'
        },
        {
          level: 0,
          volume: 0,
          mute: 0,
          channelName: '通道八',
          detection: 'OUT',
          channelId: '08'
        },
        {
          level: 0,
          volume: 0,
          mute: 0,
          channelName: '通道九',
          detection: 'OUT',
          channelId: '09'
        },
        {
          level: 0,
          volume: 0,
          mute: 0,
          channelName: '通道十',
          detection: 'OUT',
          channelId: '10'
        }
      ],
      week: null,
      isShow: false,
      times: null,
      times2: null,
      monitorList: [],
      TribunalOptions: [],
      courtCode: null,
      tribunalCode: this.tribunal,
      monitor: {
        tribunalCode: this.tribunal,
        typeId: '7'
      }
    }
  },
  watch: {
    tribunal4(newvalue) {
      this.monitor.tribunalCode = newvalue
      if (this.monitor.tribunalCode != null) {
        closeSocket()
        this.getAllTribunalEquipmentListByType()
      }
    }
  },
  created() {
    window.addEventListener('onmessageWS', this.getsocketData)
  },
  methods: {
    createSocket(equipId) {
      // createSocket('ws://192.168.0.183:8085/ws/192.168.0.11audioMonitor')
      // eslint-disable-next-line no-undef
      createSocket(VUE_APP_URL.wsUrl + '/ws/' + 'intelligentAudioMonitor' + '_' + equipId)
    },
    // 注册监听事件
    // 接收消息
    getsocketData(e) { // 创建接收消息函数
      const data = e && e.detail.data
      try {
        const obj = JSON.parse(data)
        this.formatAudio(obj)
        console.log(obj)
      } catch (e) {
        console.log(data)
      }
    },
    getAllTribunalEquipmentListByType() {
      getAllTribunalEquipmentListByType(this.monitor).then(response => {
        this.monitorList = response.data
        if (this.monitorList.length > 0) {
          this.findAllPowerConfig(this.monitorList[0])
          console.log(this.monitorList[0])
          const monitor = this.monitorList[0]
          const equipmentId = monitor.id
          this.createSocket(equipmentId)
        }
      })
    },
    getAudioStatusInterval(equipId) {
      const that = this
      this.doGetAudioStatus(equipId)
      setInterval(function() {
        console.log('get AudioStatus')
        that.doGetAudioStatus(equipId)
      }, 5000)
    },
    doGetAudioStatus(equipId) {

    },
    sendCommand(val, type) {
      val.operation = type
      sendEquipmentCommand(val).then(response => {
        this.$message({
          message: '发送成功',
          type: 'success'
        })
      })
    },
    formatAudio(val) {
      val.forEach((audio1) => {
        this.audioChannelList.forEach((audio) => {
          // if (audio1.tdh === audio.channelId) {
          //   audio.detection = audio1.detect
          //   audio.level = audio1.level
          //   audio.detection = audio1.detect
          // }

          const volume = audio1.level.toFixed(2)
          const level = this.convertLevel(volume)
          if (audio1.channelId === audio.channelId) {
            audio.detection = audio1.detection
            audio.level = level
            audio.volume = volume
          }
        })
      })
    },
    convertLevel(volume) {
      let level = 0
      if (parseInt(volume) === 0) {
        level = 0
      } else if (volume < 100 / 8) {
        level = 1
      } else if (volume < 200 / 8) {
        level = 2
      } else if (volume < 300 / 8) {
        level = 3
      } else if (volume < 400 / 8) {
        level = 4
      } else if (volume < 500 / 8) {
        level = 5
      } else if (volume < 600 / 8) {
        level = 6
      } else if (volume < 700 / 8) {
        level = 7
      } else if (volume < 800 / 8) {
        level = 8
      } else {
        level = 9
      }
      return level
    },
    findAllPowerConfig(val) {
      findAllPowerConfig(val).then(response => {
        if (response.data.length > 0) {
          this.tableData = response.data
          response.data.forEach((audio1) => {
            this.audioChannelList.forEach((audio) => {
              if (audio1.sort === parseInt(audio.channelId, 10)) {
                audio.channelName = audio1.name
              }
            })
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
    .conten{
      width: 100%;
      height: 100%;
      box-shadow: 0px 0px 30px #2243B2 inset
    }
    .video{
      width: 16px;
      height: 16px;
      position: absolute;
      margin: 10px 20px;
    }
    .camera {
      width: 130px;
      height: 64px;
      font-size: 5px;
      color: #FFFFFF;
      float: left;
      margin-top: 5px;
      margin-left: 15px;
      border-radius: 5px;
      background-image: linear-gradient(to top,#01001C,#1D399B);
    }
  .cameras{
      color:#FFFFFF;
      font-size: 12px;
      //width: 117px;
      width: 35%;
      height: 111px;
      background: #1D399B;
      // opacity: 0.2;
      border-radius: 4px;
      float: left;
      margin-left: 23px;
      margin-top: 15px;
    }

     .voiceStyle {
      text-align: center;
      font-size: 0px;
      color: #ffffff;
      background-color: #ffffff;
      width: 34px;
      height: 7px;
      line-height:10px;
      margin-top: 2px;
      border-radius: 2px;
    }

    .lowVoice {
      text-align: center;
      font-size: 0px;
      color: #ffffff;
      background-color: rgba(0, 162, 255, 0.8);
      width: 34px;
      height: 7px;
      line-height:10px;
      margin-top: 2px;
      border-radius: 2px;
    }

    .inSound {
      text-align: center;
      font-size: 0px;
      color: #ffffff;
      background-color: #e79623;
      width: 34px;
      height: 7px;
      margin-top: 2px;
      border-radius: 2px;
    }

    .highVoice {
      text-align: center;
      font-size: 0px;
      color: #ffffff;
      background-color: rgb(231, 77, 35);
      width: 34px;
      height: 7px;
      margin-top: 2px;
      border-radius: 2px;
    }

    .voiceName {
      text-align: center;
      font-size: 12px;
      color: #ffffff;
      width: 100%;
      height: 10px;
      margin-top: 5px;
    }

</style>
